let leftArrow = document.querySelector('.leftArrow')
let rightArrow = document.querySelector('.rightArrow')
let pointList = document.querySelectorAll('.pointBox li')
let ul = document.querySelector('.carouselBox ul')
let yi = document.querySelector('.yi')
let er = document.querySelector('.er')
let san = document.querySelector('.san')
let ol = document.querySelector('ol')
let box = document.querySelector('.carouselBox')
let img = document.querySelectorAll('img')
let nowIndex = 0



//左箭头事件
leftArrow.addEventListener('click', function fn() {
    nowIndex++
    if (nowIndex == ul.childElementCount) {
        nowIndex = 0

    }
    ul.style.transform = `translateX(-${nowIndex}00%)`
    if (nowIndex == 0) {
        yi.className = "active"
        san.className = ""
        er.className = ""
    } else if (nowIndex == 1) {
        er.className = "active"
        yi.className = ""
        san.className = ""
    } else {
        san.className = "active"
        yi.className = ""
        er.className = ""
    }
})

//右箭头
rightArrow.addEventListener('click', function() {
    nowIndex--
    if (nowIndex < 0) {
        nowIndex = ul.childElementCount - 1
    }
    ul.style.transform = `translateX(-${nowIndex}00%)`
    if (nowIndex == 0) {
        yi.className = "active"
        san.className = ""
        er.className = ""
    } else if (nowIndex == 1) {
        er.className = "active"
        yi.className = ""
        san.className = ""
    } else {
        san.className = "active"
        yi.className = ""
        er.className = ""
    }
})



//第一个小圆点
yi.addEventListener('click', function() {
    ul.style.transform = `translateX(0%)`
    yi.className = "active"
    san.className = ""
    er.className = ""
})

// 第二个小圆点
er.addEventListener('click', function() {
    ul.style.transform = `translateX(-100%)`
    er.className = "active"
    yi.className = ""
    san.className = ""
})

// 第三个小圆点
san.addEventListener('click', function() {
    ul.style.transform = `translateX(-200%)`
    san.className = "active"
    yi.className = ""
    er.className = ""
})

let bb = setInterval(function() {
    nowIndex++
    if (nowIndex == ul.childElementCount) {
        nowIndex = 0

    }
    ul.style.transform = `translateX(-${nowIndex}00%)`
    if (nowIndex == 0) {
        yi.className = "active"
        san.className = ""
        er.className = ""
    } else if (nowIndex == 1) {
        er.className = "active"
        yi.className = ""
        san.className = ""
    } else {
        san.className = "active"
        yi.className = ""
        er.className = ""
    }
}, 3000)

//移出
box.addEventListener('mouseleave', function() {

    clearInterval(bb)
    let yy = setInterval(function() {
        nowIndex++
        if (nowIndex == ul.childElementCount) {
            nowIndex = 0

        }
        ul.style.transform = `translateX(-${nowIndex}00%)`
        if (nowIndex == 0) {
            yi.className = "active"
            san.className = ""
            er.className = ""
        } else if (nowIndex == 1) {
            er.className = "active"
            yi.className = ""
            san.className = ""
        } else {
            san.className = "active"
            yi.className = ""
            er.className = ""
        }
    }, 3000)
    box.addEventListener('mouseenter', function() {
        clearInterval(yy)
    })
})

// 移入